<template>
	<div class="search hr-flex-start">
		<el-form ref="queryForm" :inline="true">
			<!-- <el-select placeholder="类型" clearable>
								<el-option label="目录" :value="1" />
								<el-option label="菜单" :value="2" />
								<el-option label="按钮" :value="3" />
							</el-select> -->
			<el-row style="width: 100%; height: 100%">
				<template v-for="(item, index) in propList" :key="index">
					<el-form-item :label="item.label"  :class="{ small: size == 'small' }">
						<template v-if="item.type == 'input'">
							<el-input v-model="searchObj[item.prop]" v-bind="item.inputStye" :style="{ width: item.IWidth ? item.IWidth : size == 'small' ? '120px' : '150px' }" />
						</template>
						<template v-else-if="item.type == 'select'">
							<!-- <el-input :placeholder="item.placeholder" v-model="searchObj[item.prop]" /> -->
							<el-select :placeholder="item.placeholder" v-model="searchObj[item.prop]"  :style="{ width: item.IWidth ? item.IWidth : size == 'small' ? '120px' : '150px' }">
								<el-option v-for="(itemOption, index) in item.selectOptions" :key="index" v-bind="itemOption" />
							</el-select>
						</template>
						<template v-else-if="item.type == 'date'">
							<el-date-picker
								v-model="searchObj[item.prop]"
								type="date"
								:placeholder="item.placeholder"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								unlink-panels
								:style="{ width: item.IWidth ? item.IWidth : size == 'small' ? '120px' : '150px' }"
							/>
						</template>
					</el-form-item>
				</template>

				<el-form-item>
					<!-- :searchObj="searchObj" 作用域插槽携带参数返回 -->
					<slot name="footer" :searchObj="searchObj">
						<el-button icon="ele-Refresh" @click="resteAction" :class="{ hidden: showButtonType.indexOf('reset') == -1 }"> {{ $t('nPhtThUn4LrVtwBcSaYw') }} </el-button>
						<el-button type="primary" icon="ele-Search" @click="query" :class="{ hidden: showButtonType.indexOf('query') == -1 }"> {{ $t('qEh3zD5bC8bZb4bLvFe29') }} </el-button>
						<el-button icon="ele-Plus" type="primary" @click="add" :class="{ hidden: showButtonType.indexOf('add') == -1 }"> {{ $t('wnpevud10fwvwhDyynC4A') }} </el-button>
						<el-button icon="ele-Document" type="primary" @click="detail" :class="{ hidden: showButtonType.indexOf('detail') == -1 }"> {{ $t('krTHz2Gx2u7DTdIjyJh9') }} </el-button>
						<el-button icon="ele-Edit" type="primary" @click="change" :class="{ hidden: showButtonType.indexOf('change') == -1 }"> {{ $t('xNgff1BvsLPPx60QeWq') }} </el-button>
						<el-button icon="ele-Refresh" type="primary" @click="refresh" :class="{ hidden: showButtonType.indexOf('refresh') == -1 }"> {{ $t('vgSutcUn1PeTenwTcfQ2') }} </el-button>
						<el-button icon="ele-FolderOpened" type="primary" @click="read" :class="{ hidden: showButtonType.indexOf('read') == -1 }"> {{ $t('yFxle491LRmz8jKWzlP2x') }} </el-button>
						<el-button icon="ele-Delete" type="danger" @click="deleteAction" :class="{ hidden: showButtonType.indexOf('delete') == -1 }"> {{ $t('cydTaQ8C5uLQr0usuKao') }} </el-button>
					</slot>
				</el-form-item>
			</el-row>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { PropType, reactive } from 'vue';
import resetSearch from '/@/utils/hook/resetSearch';
//注意不要写ts文件后缀!!
import { IItemStyleType } from './type/index';

const props = defineProps({
	propList: {
		// type: Array as PropType<IItemStyleType[]>,
		type: Array as PropType<IItemStyleType[]>,
		required: true,
	},
	searchObj: {
		type: Object,
		required: true,
	},
	showButtonType: {
		type: Array,
		default: () => [],
	},
	//size属性暂时禁用掉,直接使用Dropdown属性来设置菜单的大小!
	size: {
		type: String,
		default: 'default',
	},
});
let searchObj = reactive(props.searchObj);
const emit = defineEmits(['queryAction', 'addAction', 'deleteAction', 'changeAction', 'detailAction', 'refreshAction', 'readAction']);

//一键已读
const read = () => {
	emit('readAction');
};
//查询事件
const query = () => {
	emit('queryAction', searchObj);
};
//新增事件
const add = () => {
	emit('addAction', searchObj);
};
//重置按钮
const resteAction = () => {
	searchObj = resetSearch(searchObj);
};
//刷新事件
const refresh = () => {
	emit('refreshAction');
};
//编辑按钮
const change = () => {
	emit('changeAction');
};
//详情按钮
const detail = () => {
	emit('detailAction');
};
//删除按钮
const deleteAction = () => {
	emit('deleteAction');
};

defineExpose({
	searchObj,
});
</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<style scoped lang="scss">
.hidden {
	display: none;
}
//small间距变小,调整el-ui的css样式,注意找到它的父级!!
.small {
	margin-right: 12px !important;
}
</style>
